<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width; initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Swipe Gallery</title>
  <script src="lib/zepto.min.js" type="text/javascript"></script>
  <script src="../swipeslide.js" type="text/javascript"></script>
  <link rel="stylesheet" href="../swipeslide.css">
  <style type="text/css" media="screen">
  header,footer,article,section,figure,figcaption {display: block;}
  body,ul,li {margin:0;padding:0;}
  body {
    font: 16px/24px Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust:none;
  }

  header { padding: 20px; color: #fff; background: #000;}
  
  .box {
    -webkit-perspective: 600;
    overflow:hidden;
    margin: 20px;
    padding: 70px 20px;
    border: 3px dashed #eee;
    border-radius: 20px;
  }
  .g, .gh {
    -webkit-perspective: none;
    -webkit-transform-style: preserve-3d;
    width: 25%;
    height: 100px;
    margin: 0;
    float: left;
    padding: 0 1%;
    -webkit-box-sizing: border-box;
  }
  .g .ui-swipeslide-slide,
  .gh .ui-swipeslide-slide {
    width: 100%; height: 100%; opacity: 0.2;
    -webkit-transition: opacity 0.5s;
    font-size: 32px;
    color: #fff;
    display: -webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack:center;
  }
  .g .ui-swipeslide-slide.active,
  .gh .ui-swipeslide-slide.active {
    opacity: 1;
  }
  .gh {
    padding:0;
    width:100%;
    height:200px;
    
  }
  </style>
  <script type="text/javascript">
  $(document).ready(function() {
    $('.g').swipeSlide({threeD: true, vertical: true, bulletNavigation: false});
    $('.gh').swipeSlide({threeD: true, vertical: false, bulletNavigation: false});
  })  
  </script>
</head>
<body>
  <header>
    <h1>SwipeSlide 3D</h1>
  </header>
  
  <div class="box">
    <div class="g">
      <ul>
        <li style="background: #f00;">1</li>
        <li style="background: #090;">2</li>
        <li style="background: #0f0;">3</li>
        <li style="background: #0f9;">4</li>
        <li style="background: #0ff;">5</li>
        <li style="background: #09f;">6</li>
      </ul>
    </div>
  
    <div class="g">
      <ul>
        <li style="background: #f00;">1</li>
        <li style="background: #090;">2</li>
        <li style="background: #0f0;">3</li>
        <li style="background: #0f9;">4</li>
        <li style="background: #0ff;">5</li>
        <li style="background: #09f;">6</li>
      </ul>
    </div>
    
    <div class="g">
      <ul>
        <li style="background: #f00;">1</li>
        <li style="background: #090;">2</li>
        <li style="background: #0f0;">3</li>
        <li style="background: #0f9;">4</li>
        <li style="background: #0ff;">5</li>
        <li style="background: #09f;">6</li>
      </ul>
    </div>
    
    <div class="g">
      <ul>
        <li style="background: #f00;">1</li>
        <li style="background: #090;">2</li>
        <li style="background: #0f0;">3</li>
        <li style="background: #0f9;">4</li>
        <li style="background: #0ff;">5</li>
        <li style="background: #09f;">6</li>
      </ul>
    </div>
  </div>
  
  <div class="box">
  <div class="gh">
    <ul>
      <li style="background: #f00;">1</li>
      <li style="background: #090;">2</li>
      <li style="background: #0f0;">3</li>
      <li style="background: #0f9;">4</li>
      <li style="background: #0ff;">5</li>
      <li style="background: #09f;">6</li>
    </ul>
  </div>
  </div>
  


</body>
</html>
